<template>
	<div class="edit-source">
		<div class="edit-source_header">
			<div class="edit-source_field">
				字段
			</div>
			<div class="edit-source_mapping">
				映射
			</div>
			<div class="edit-source_status">
				状态
			</div>
		</div>
		<div v-for="(item, index) in ejson" :key="index" class="edit-source_item">
			<div class="edit-source_field">{{ item.field }}</div>
			<y-input
				v-model="item.mapping"
				class="edit-source_mapping"
				@input="onInput"
			></y-input>
			<div class="edit-source_status">
				{{ item.status ? "匹配成功" : "未匹配" }}
			</div>
		</div>
		<div style="display: none;">{{ ejson }}</div>
	</div>
</template>

<script>
export default {
	name: "EditSource",
	data() {
		return {
			localList: [],
		};
	},
	props: {
		value: Object,
		dataJson: Object,
	},
	computed: {
		ejson() {
			return this.mapping();
		},
	},
	mounted() {
		this.localList = this.value.model;
	},
	methods: {
		onInput() {
			this.value.model = this.ejson;
			this.$emit("input", this.value);
		},
		mapping() {
			let mappingList = this.value.model;
			let arr = [];
			try {
				arr = JSON.parse(this.value.json);
			} catch (e) {
				mappingList = mappingList.map((element) => {
					element.status = false;
					return element;
				});
				console.warn(e.message);
			}
			if (Array.isArray(arr) && arr.length > 0) {
				let keys = Object.keys(arr[0]);
				mappingList = mappingList.map((element) => {
					let searchKey = "";
					searchKey = element.mapping ? element.mapping : element.field;
					let index = keys.findIndex((key) => key === searchKey);
					let matchStatus = index > -1;
					element.status = matchStatus;
					return element;
				});
			}
			return mappingList;
		},
	},
};
</script>

<style lang="stylus" scoped>

.edit-source_item,.edit-source_header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    .edit-source_field{
        flex: 1;
        text-align: center;
    }
    .edit-source_mapping{
        flex: 2;
        text-align: center;
    }
    .edit-source_status{
        flex: 2;
        text-align: center;
    }
}
</style>
